<template>
  <div>
    <!-- 用户信息 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="user">用户昵称：</div>
      </el-col>
      <el-col :span="6">
        <div class="name">{{userMessage.userName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="user">宠物昵称：</div>
      </el-col>
      <el-col :span="6">
        <div class="name">{{userMessage.petName}}</div>
      </el-col>
    </el-row>
    <!-- 用户内容 -->
    <el-row style="margin-top:20px">
      <el-col :span="4">
        <div class="user">动态内容：</div>
      </el-col>
      <el-col :span="20">
        <div class="name">{{userMessage.postContent}}</div>
      </el-col>
    </el-row>
    <!-- 图片显示 -->
    <div>
      <template v-for="item in userMessage.mediaList">
        <!-- 图片展示数据 -->
        <template v-if="item.meidaType==2?true:false">
          <el-image
            :key="item.id"
            style="width: 100px; height: 100px;margin-left:26px;margin-top:22px"
            :src="item.mediiaUrl"
            @click="preview(item.mediiaUrl)"
          ></el-image>
        </template>

        <!--  展示视频播放 -->
        <template v-if="item.meidaType==1?true:false">
          <video
            style="width:100%; height: 250px;margin-top:22px"
            :key="item.id"
            :src="item.mediiaUrl"
            controls="controls"
          >您的浏览器不支持视频播放</video>
        </template>
      </template>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 用户评论的内容 -----没有被评论的人-->
    <template v-for="(item,index) in comment">
      <el-row
        style="margin-top:20px"
        :key="index"
        v-if="item.beUserName==''|| item.beUserName==null ?true:false"
      >
        <el-col :span="8">
          <div class="user">{{item.userName}}：</div>
        </el-col>

        <el-col :span="13">
          <div class="name">{{item.commentContent}}</div>
        </el-col>
        <el-col :span="2">
          <div class="name">
            <el-button
              type="primary"
              size="small"
              @click="shield(item)"
            >{{item.commentStatus==1?'屏蔽':'已禁用'}}</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 有被评论的人员 -->
      <template v-for="item in item.postCommentList">
        <el-row
          style="margin-top:20px"
          :key="item.id"
          v-if="item.beUserName==''|| item.beUserName==null ?false:true"
        >
          <span class="user">{{item.userName}}回复：{{item.beUserName}}</span>
          <span style="margin-left:20px">{{item.commentContent}}</span>
        </el-row>
      </template>
    </template>

    <!-- 分页操作 -->
    <div class="currentpages">
      <el-pagination
        layout="prev, pager, next"
        :total="commentTotal"
        :page-size="10"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <!-- 测试图片预览 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    merchant: Boolean,
    userMessage: Object,
    comment: Array,
    commentTotal: Number
  },
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //图片预览
      dialogImageUrl: "",
      dialogVisible: false,
      shows: false
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("currentpage", val);
      console.log("分页", this.commentTotal);
    },
    // 每页多少
    handleSizeChange(val) {
      console.log("每页多少", val);
    },
    // 屏蔽
    shield(val) {
      this.$emit("commentshield", val);
      console.log(val);
    },
    // 预览图片
    preview(val) {
      this.dialogImageUrl = val;
      this.dialogVisible = true;
      this.shows = true;
      console.log("预览图片", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.shows ::v-deep .el-dialog {
  z-index: 999;
}
.currentpages {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.user {
  font-weight: bold;
}
.name {
  text-align: left;
}
</style>